<script setup>
import { useRoute } from 'vue-router';
import { useRouter } from 'vue-router';
import { usePostListStore } from '@/stores/post';
import { useUserListStore, useUserStore } from '@/stores/user';
import { ref } from 'vue'
import { addCommentFn } from '@/api/post';
import { likeFn, doCollectFn } from '@/api/post';
import { addConcernFn } from '@/api/user';

const router = useRouter()
const route = useRoute()
const userList = useUserListStore()
const user = useUserStore()
const post = (usePostListStore().getPost(route.query.postid))
const text = ref('')

function toback() {
    router.back()
}

function toPostComment() {
    if (text.value) {
        addCommentFn({
            userid: user.userInfo.userid,
            postid: route.query.postid,
            text: text.value,
            date: (new Date()).toLocaleString()
        }).then(res => {
            console.log(res);
            text.value = ''
        })
    }
}

function like(postid, postUserid) {
    likeFn({
        postid,
        postUserid,
        userid: user.userInfo.userid
    }).then(res => {
        showToast(res.message)
    })
}

function doCollect(postid, postUserid) {
    doCollectFn({
        postid,
        postUserid,
        userid: user.userInfo.userid
    }).then(res => {
        // console.log(res);
        showToast(res.message)
    })
}

function toConcern(postUserid) {
    addConcernFn({
        userid: user.userInfo.userid,
        concernUserid: postUserid,
    }).then(res => {
        showToast(res.message)
    })
}

</script>

<template>
    <div class="main">
        <van-nav-bar title="查看详情" left-text="返回" left-arrow @click-left="toback" />
        <div class="content">
            <section>
                <div class="top">
                    <img :src="userList.getUserInfo(post.userid).img" alt="">
                    <div>
                        <h3>{{ userList.getUserInfo(post.userid).username }}</h3>
                        <p>{{ post.time.slice(0, 10) }}</p>
                    </div>
                    <span @click="toConcern(post.userid)">{{ (user.userInfo.concern.indexOf(post.userid) == -1) ? '+关注'
                        : '已关注'
                        }}</span>
                </div>
                <div class="center">
                    <h2>{{ post.postText }}</h2>
                    <img :src="post.img" alt="">
                    <p><span v-for="topic in post.topics"># {{ topic }}</span></p>
                </div>
                <div class="buttom">
                    <div class="left">{{ parseInt(Math.random() * 100) }} 浏览</div>
                    <div class="right">
                        <van-icon name="warning-o"></van-icon>
                        举报
                    </div>
                </div>
            </section>
            <div class="bottom">
                <div class="title">
                    <span style="font-size: 16px; font-weight: bold; margin-right: 20px;">评论</span>
                    <span>共{{ post.comments.length }}条</span>
                </div>
                <div class="main">
                    <div v-for="item in post.comments" class="box">
                        <img :src="userList.getUserInfo(item.userid).img" alt="">
                        <div class="right">
                            <span>{{ userList.getUserInfo(item.userid).username }}</span>
                            <p>{{ item.text }}</p>
                            <small>{{ item.date }}</small>
                        </div>
                    </div>
                </div>
            </div>
            <div class="comment">
                <van-field class="input" v-model="text" placeholder="您想说些什么呢？" @keypress.enter="toPostComment" />
                <div class="right">
                    <!--  -->
                    <span @click="like(post.postid, post.userid)">
                        <van-icon v-if="post.likes.indexOf(user.userInfo.userid) != -1" name="good-job" size="24px"
                            color="red"></van-icon>
                        <van-icon v-else name="good-job-o" size="24px"></van-icon>
                    </span>
                    <span @click="doCollect(post.postid, post.userid)">
                        <van-icon v-if="post.collects.indexOf(user.userInfo.userid) != -1" name="star" size="24px"
                            color="#ffa600"></van-icon>
                        <van-icon v-else name="star-o" size="24px"></van-icon>
                    </span>
                    <span>
                        <van-icon name="comment-o" size="24px"></van-icon>
                    </span>
                </div>
            </div>
        </div>
    </div>
</template>

<style lang="scss" scoped>
section {
    background-color: rgb(240, 240, 240);
    padding: 10px;
    margin: 10px 0;
    box-sizing: border-box;
    border-radius: 10px;

    .top {
        display: flex;
        position: relative;

        img {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            margin-right: 10px;
        }

        h3 {
            padding: 0;
            margin: 0;
        }

        span {
            position: absolute;
            right: 10px;
            display: inline-block;
            font-size: 16px;
            color: red;
            border: 1px solid red;
            padding: 4px;
            border-radius: 5px;
            top: 2px;
        }
    }

    .center {
        img {
            width: 100px;
            height: 100px;
        }

        span {
            padding: 0 5px;
        }
    }

    .buttom {
        display: flex;
        justify-content: space-between;
    }
}

.bottom {
    padding-bottom: 10px;

    .main {
        margin-top: 5px;

        .box {
            margin: 5px 0;
            display: flex;
            width: 100%;
            padding: 10px;
            box-sizing: border-box;
            background-color: rgb(234, 234, 234);
            border-radius: 5px;

            img {
                width: 40px;
                height: 40px;
                margin-right: 20px;
                border-radius: 50%;
            }

            .right {
                line-height: 20px;

                span {
                    font-weight: bold;
                }

                p {
                    margin: 0;
                    font-size: 16px;
                }
            }
        }

    }
}

.comment {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    bottom: 10px;
    width: 355px;
    right: 10px;
    z-index: 999;
    background-color: white;

    .input {
        border: 1px black solid;
        border-radius: 5px;
        width: 70%;
    }

    .van-icon {
        margin: 0 5px;
    }
}
</style>